<template>
  <div>
    <div>
      <el-button type="primary" icon="el-icon-search" @click="onSearchClick()">搜索</el-button>
      <el-input style="width: 30%"
                placeholder="请输入内容(UID/昵称)"
                v-model="inputDesc">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-divider><i class="el-icon-zoom-in"></i></el-divider>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      max-height="950">
      <el-table-column
        prop="uid"
        label="UID">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别">
      </el-table-column>
      <el-table-column
        prop="vipLv"
        label="VIP等级">
      </el-table-column>
      <el-table-column
        prop="gold"
        label="金币">
      </el-table-column>
      <el-table-column
        prop="bankGold"
        label="银行">
      </el-table-column>
      <el-table-column
        prop="freeze"
        label="冻结">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="注册时间">
      </el-table-column>
      <el-table-column
        prop="loginTime"
        label="上线时间">
      </el-table-column>
      <el-table-column
        prop="logoutTime"
        label="下线时间">
      </el-table-column>
      <el-table-column
        prop="address"
        label="IP">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" icon="el-icon-edit" circle size="mini"></el-button>
          <el-button @click="closeClick(scope.$index,tableData)" type="danger" icon="el-icon-delete" circle size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      style="margin-top: 20px"
      v-show="this.tableData.length>20"
      background
      layout="prev, pager, next"
      :total="1000">
    </el-pagination>

  </div>

</template>

<script>
  import axios from 'axios'
  export default {
    methods: {
      onSearchClick(){
        axios.get("/searchuserinfo",{
          params:{
            param:this.inputDesc
          }
        }).then(resp => {
          if(resp.data.result){
            this.tableData = resp.data.msg
          }
        })
        //搜索
      },
      handleClick(row) {
        this.$router.push({
          path : '/userEdit',
          query:{
            uid : row.uid,
            userName: row.userName,
            scenes: 'userInfo'
          }
        });
      },
      closeClick(index,rows){
        let row = rows[index]
        this.$confirm('是否将玩家<<'+row.userName+'>>封号并且踢下线?', '封号', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          axios.get("/kicking",{
            params:{
              uid:row.uid
            }
          }).then(resp => {
            if(resp.data.result){
              rows.splice(index, 1);
              //请求服务器是否可以封号
              this.$message({
                type: 'success',
                message: resp.data.msg
              });
            }else {
              this.$message({
                type: 'success',
                message: resp.data.error
              });
            }
          })

        }).catch(() => {
          console.log('取消');
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    },
    data() {
      return {
        tableData: [],
        inputDesc : ''
      }
    }
  }
</script>

<style scoped>

</style>
